<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" type="text/css" href="/static/css/detailsmusic.css"/>
    {% csrf_token %}
</head>

<body style="background-image: url(/static/images/bgyoyo.jpg);width:100%;background-repeat:no-repeat;background-size: cover;">

<div class="music-lgin">

    <div class="music-lgin-all">
        <!--左手-->
        <div class="music-lgin-left ovhd">
            <div class="music-hand">
                <div class="music-lgin-hara"></div>
                <div class="music-lgin-hars"></div>
            </div>
        </div>

        <!--脑袋-->
        <div class="music-lgin-dh">
            <div class="music-lgin-alls">
                <div class="music-lgin-eyeleft">
                    <div class="music-left-eyeball yeball-l"></div>
                </div>
                <div class="music-lgin-eyeright">
                    <div class="music-right-eyeball yeball-r"></div>
                </div>
                <div class="music-lgin-cl"></div>
            </div>
            <!--鼻子-->
            <div class="music-nose"></div>
            <!--嘴-->
            <div class="music-mouth music-mouth-ds"></div>
            <!--肩-->
            <div class="music-shoulder-l">
                <div class="music-shoulder"></div>
            </div>
            <div class="music-shoulder-r">
                <div class="music-shoulder"></div>
            </div>
            <!--消息框-->
            <div class="music-news">欢迎光临！</div>
        </div>

        <!--右手-->
        <div class="music-lgin-right ovhd">
            <div class="music-hand">
                <div class="music-lgin-hara"></div>
                <div class="music-lgin-hars"></div>
            </div>
        </div>

    </div>
    <div class="music-lgin-text">
        <center><label style="color: white;font-size: 20px;">用户登录</label></center>
    </div>
    <!--1-->
    <div class="music-lgin-text">
        <input class="inputname inputs" type="text" placeholder="请输入用户名"/>
		<span class="text" style="font-size:12px;color: white">请输入您的用户名</span>
    </div>
    <!--2-->
    <div class="music-lgin-text">
        <input type="password" class="mima inputs" placeholder="请输入密码"/>
		<span class="text" style="font-size:12px;color: white">请输入您的密码</span>
    </div>
    <!--3-->
    <div class="music-lgin-text" style="text-align: center;">
        <input class="music-qd buttons" type="button" value="登录"/>
    </div>
    <div class="music-lgin-text">
        <div style="margin-top: 25px;float: right;"><span style="color: white;">还没有账号？</span><a href="/login/reg/"
                                                                                                style="color: red;">注册</a>
        </div>
    </div>

</div>

<script src="/static/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
	    $(function () {
        $('.inputname').next().hide();
        $('.mima').next().hide();
    });
    //眼睛 密码部分
    $(".mima").focus(function () {
        $(".music-lgin-left").addClass("left-dh").removeClass("rmleft-dh");
        $(".music-lgin-right").addClass("right-dh").removeClass("right-rmdh");
        $(".music-hand").addClass("no");
    }).blur(function () {
        $(".music-lgin-left").removeClass("left-dh").addClass("rmleft-dh");
        $(".music-lgin-right").removeClass("right-dh").addClass("right-rmdh");
        $(".music-hand").removeClass("no");

    })
    //点击小人出来
    $(".inputname").focus(function () {
        $(".music-lgin-all").addClass("block");
        $(".music-news").addClass("no")
    })
    //点击小人消失

    //          $(".music-qd").focus(function(){
    //          	$(".music-lgin-all").removeClass("block")
    //          })


    //注册正则 简单判断

    $('.music-qd').click(function () {
        var username = $('.inputname').val();
        var reg = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
        var pwd = $('.mima').val();
        var csrf = $("input[name='csrfmiddlewaretoken']").val();
        if (username == '') {
             $('.inputname').next().text("请输入账号").css("color","red");
            return false
        } else if (pwd == "") {
            // alert('请输入密码')
             $('.mima').next().text("请输入密码").css("color","red");
            return false
        } else {

            var form_data = {"username": username, "password": pwd, csrfmiddlewaretoken: csrf};
            //发送请求
            $.post('/login/', form_data, function (data) {
                if (data.code == 1) {
                    window.location.href = data.url
                } else {
                    alert(data.msg)
                }
            })

        }
    })


</script>

</body>

</html>